// 窗口插件
import { useIntersectionObserver } from '@vueuse/core'
/**
 * 定义懒加载插件
 */
export const lazyPlugin = {
    install(app) {
        //定义全局指令 img-lazy
        app.directive('img-lazy', {
            mounted(el, binding) {
                //el 当前绑定了v-img-lazy指令的img元素 binding.value 指令等于表达式后面绑定的值 图片url
                //el:<img src="xxxx" alt="">
                //binding.value:'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg'
                //console.log(el, binding.value);
                //监听元素是否进入视口区域
                const { stop } = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        //console.log(isIntersecting) true/false
                        if (isIntersecting) {
                            // 进入视口区域

                            el.src = binding.value
                            stop()
                        }
                    },
                )

            }
        })
    }
}